<template>
  <div class="edit-address-page">

    <van-nav-bar title="收货地址" left-text="返回" left-arrow @click-left="$router.push('/mine')" />


    <is-empty v-if="address_list.length == 0">没有任何收货地址</is-empty>

    <van-radio-group v-model="default_address" @change="setDefaultAddress">
      <van-cell-group v-for="item in address_list" :key="item.id" class="addressGroup">
        <van-cell icon="location-o" :title="item.address" :label="person(item.name, item.phone)" />

        <van-cell>
          <van-radio slot="title" :name="item.id" @change="setDefaultAddress(item.id)">
            <span :class="item.default && 'red'">{{ item.default ? '默认地址' : '设为默认' }}</span>
          </van-radio>
          <div>
            <router-link :to="{ path: '/addressEdit', query: { addressId: item.id } }" style="margin-right: 10px;">
              <van-icon class-prefix="my-icon" name="editor" />
              编辑
            </router-link>
            <span @click="addressDelete(item.id)">
              <van-icon class-prefix="my-icon" name="lajitong" />
              删除
            </span>
          </div>
        </van-cell>
      </van-cell-group>
    </van-radio-group>

    <van-button class="bottom_btn" @click="setNewAddress" size="large">添加地址</van-button>


  </div>
</template>

<script>
import { Toast } from 'vant';
import { Dialog } from 'vant';

import IsEmpty from '@/components/include/empty/';

export default {
  components: {
    [IsEmpty.name]: IsEmpty
  },
  data() {
    return {
      default_address: '1',
      address_list: [
        {
          id:0,
          name: '',
          phone: '',
          address: '',
          default: false
        }
      ]
    };
  },
  mounted() {
    this.loadLists();
    let that = this;
    this.$EventBus.$on('address_update_success', function(val) {
      if (val === 'ok') that.loadLists();
    });
  },
  computed: {
    allAddress() {
      return this.$store.state.address;
    },
    person(){
      return function(name, phone){
        return name + " " + phone
      }
    }
  },
  methods: {
    setDefaultAddress(address_id) {
      this.apiPost('/shop.address/set_default', {
        address_id: address_id
      }).then(res => {
        if (res.data > 0) {
          this.$EventBus.$emit('address_update_success', 'ok');
        }
      });
    },
    addressDelete(address_id) {
      Dialog.confirm({
        title: '删除确认',
        message: '确认删除吗？'
      })
        .then(() => {
          this.apiPost('/shop.address/delete', {
            address_id: address_id
          }).then(res => {
            if (res.data > 0) {
              Toast('删除成功');
              //this.$router.replace('/user/address')
              this.$EventBus.$emit('address_update_success', 'ok');
             // this.address_list = splice(0, this.address_list.length);
               this.loadLists();
            }
          });
        })
        .catch(() => {});
    },
    loadLists() {
      this.apiPost('/shop.address/lists', {}).then(res => {
        this.address_list = res.data;
        for (var index in this.address_list) {
          if (this.address_list[index].default === true) {
            this.default_address = this.address_list[index].id;
          }
        }
      });
    },
    setNewAddress() {
      this.$router.push('/addressAdd');
    },
    toProfile() {
      this.$router.push({
        path: '/mine'
      });
    },
    toModifyAddress(index) {
      this.$router.push({
        path: '/addressLists',
        query: {
          index: index
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
  @import "@/assets/scss/variable.scss";
.edit-address-page {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1001;
  background-color: #f5f5f5;
  header {
    margin-top: 50px;
    position: relative;
    height: 50px;
    border-bottom: 1px solid #eee;
    line-height: 50px;
    background-color: #fff;
  }
}

.bottom_btn {
  background-color: $colorPrimary;
  color: white;
  position: fixed;
  bottom: 0;
}
</style>
